// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use './buttons' as *;

.multi-text-fields {
  $height: 1.6em;
  $width: 200px;
  $input-width: 160px;

  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;

  .handle {
    @include icon-before('icon-handle');
    @include border-left();
    @include border-vert();
    @include transition(background);
    @include transition(color);
    border-top-left-radius: $default-border-radius;
    border-bottom-left-radius: $default-border-radius;
    user-select: none;
    background: $light-gray;
    color: $gray;
    cursor: move;
    display: inline-block;
    height: $height;
    line-height: $height;
    text-align: center;
    width: 1.1em;
  }

  .ui-sortable-placeholder {
    height: $height;
  }

  .ui-sortable-helper {
    input,
    .handle {
      box-shadow: 2px 2px 3px $gray;
    }
  }

  input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    max-width: $input-width;

    &.width-scrolling {
      width: ($input-width - 10);
    }
  }

  a.i-button-remove {
    @include i-button-custom($height);
    display: inline-block;
    vertical-align: middle;
    visibility: hidden;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    margin-bottom: 3px;
    overflow: initial;
    width: $width;

    &:hover a.i-button-remove {
      visibility: visible;
    }

    &:last-of-type {
      margin-bottom: 1px;

      .handle {
        cursor: default;
        background: white;
        color: white;
      }

      a.i-button-remove {
        visibility: hidden;
      }
    }

    &.ui-sortable-helper a.i-button-remove {
      visibility: hidden;
    }
  }
}
